<template>
  <div>
    <el-dialog title="案件详情" :visible.sync="visible" width="90%">
      <div>
        <div class="operation-title">
          <span class="t-ml10 t-fz16 t-color3">行动操作栏</span>
          <i class="el-icon-set-up">
          </i>
          <span class="t-ml20">
            <el-button
              round
              icon="el-icon-phone-outline"
              size="mini"
              @click="showCallBack"
              >案件跟踪记录</el-button
            >
            <el-button
              round
              icon="el-icon-s-comment"
              size="mini"
              @click="showMsg"
            >
              发送短信
            </el-button>
            <el-button
              round
              icon="el-icon-refresh"
              size="mini"
              @click="refreshOverdueJinE"
              >实时欠款更新</el-button
            >

            <el-button
              round
              type="danger"
              icon="el-icon-bank-card"
              size="mini"
              @click="StopPay"
            >止付</el-button>
          </span>
        </div>
      </div>
      <div class="case-detail t-mt10">
        <div class="t-mt10">
          <h2 style="margin-bottom: 15px">案件信息</h2>
          <el-tabs>
            <el-tab-pane label="案件信息">
              <div>
                <h2 style="margin-bottom: 15px">客户信息</h2>
                <el-form label-width="120px" size="mini" disabled>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="客户姓名">
                        <el-input v-model="row.name" oncontextmenu="return false" draggable="true" oncopy="return false"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="证件类型">
                        <el-input v-model="row.documentType" oncontextmenu="return false" draggable="true" oncopy="return false"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="证件号码">
                        <el-input v-model="row.cardNumber.substr(0, 4)+ '****' +row.cardNumber.substr(0, 4)" oncontextmenu="return false" draggable="true" oncopy="return false"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="手机号">
                        <el-input v-model="row.phoneNumber.substr(0, 4)+ '****' +row.phoneNumber.substr(0, 4)" oncontextmenu="return false" draggable="true" oncopy="return false"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <el-divider></el-divider>
              </div>
              <div>
                <h2 style="margin-bottom: 15px">案件信息</h2>
                <el-form label-width="120px" size="mini" disabled>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="逾期天数">
                        <el-input v-model="row.overdueDay" oncontextmenu="return false" draggable="true" oncopy="return false"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="逾期期数">
                        <el-input v-model="row.numberOfOverduePeriods" oncontextmenu="return false" draggable="true" oncopy="return false"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="透支额">
                        <el-input v-model="row.overdraft" oncontextmenu="return false" draggable="true" oncopy="return false"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="透支本金">
                        <el-input v-model="row.overdraftPrincipal" oncontextmenu="return false" draggable="true" oncopy="return false"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="最低还款额">
                        <el-input v-model="row.minimumPayment" oncontextmenu="return false" draggable="true" oncopy="return false"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="逾期欠款">
                        <el-input v-model="row.overdueArrears" oncontextmenu="return false" draggable="true" oncopy="return false"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="账单日">
                        <el-input v-model="row.billDay" oncontextmenu="return false" draggable="true" oncopy="retuen false"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="卡号">
                        <el-input v-model="row.cardNumber.substr(0, 4)+ '****' +row.cardNumber.substr(0, 4)" oncontextmenu="return false" draggable="true" oncopy="retuen false"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <el-divider></el-divider>
              </div>

            </el-tab-pane>
            <el-tab-pane label="行动记录">
              <option-list :row="row" ref="optionsTab"></option-list>
            </el-tab-pane>
            <el-tab-pane label="联系信息">
              <contact :row="row" :isDial= true @contacted="openBack" ref="contacts"></contact>
            </el-tab-pane>
            <el-tab-pane label="话术提醒">
              <div>
                <el-form label-width="120px" size="mini">
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="话术标题">
                        <el-select
                          v-model="form.verbalTitle"
                          placeholder="请选择"
                          @change="getmsgcontent"
                          size="mini"
                        >
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col>
                      <el-form-item label="话术内容">
                        <el-input type="textarea" v-model="form.verbalContent" autosize disabled></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-tab-pane>
            <!--<el-tab-pane label="出账机构信息">
              <branch-list :row="row"></branch-list>
            </el-tab-pane>-->
          </el-tabs>
        </div>

        <el-dialog title="案件跟踪记录" :visible.sync="addBack" width="520px" append-to-body>
          <el-row>
            <el-form :model="backInfo" ref="backInfo" label-width="100px" label-position="right">
              <el-col :span="24" v-if="phoneFlag == true">
                <el-form-item label="通话开始时间:">
                  <el-input v-model="backInfo.talkBegin"  size="small" style="width: 60%" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="phoneFlag == true">
                <el-form-item label="通话结束时间:" >
                  <el-input v-model="backInfo.talkEnd"  size="small" style="width: 60%" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="phoneFlag == true">
                <el-form-item label="通话时长:" >
                  <el-input v-model="backInfo.talkTime"  size="small" style="width: 60%" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="回访结果:" prop='callResult' >
                  <el-select v-model="backInfo.callResult" size="small" placeholder="请选择" >
                    <el-option
                      v-for="item in resultOptions"
                      :key="item.number"
                      :label="item.chinese"
                      :value="item.number"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="回访备注:" prop='callRemarks'>
                  <el-input
                    type="textarea"
                    placeholder="请输入内容"
                    maxlength="100"
                    show-word-limit
                    resize="none"
                    rows="3"
                    style="width: 360px !important; height: 96px !important"
                    v-model="backInfo.callRemarks"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveBackInfo">提 交</el-button>
            <el-button type="danger" @click="cancelBack">取 消</el-button>
          </span>
        </el-dialog>
      </div>
    </el-dialog>
    <!--发送短信 -->
    <send-msg
      :row="rowo"
      v-if="dialogVisible_msg"
      :dialogVisible.sync="dialogVisible_msg">

    </send-msg>
    <!--逾期试算 -->
    <!-- <overdue-trial
    ></add> -->

  </div>
</template>

<script>


import OptionList from "./OptionList";
import Contact from "./Contact";
import SendMsg from "./SendMsg";
import BranchList from "./BranchList";
import {cmcUrl} from "../../../../../static/baseUrl";
import {Message} from "element-ui";


export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "80%",
    },
    row: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    OptionList,
    Contact,
    SendMsg,
    //BranchList,
  },
  data() {
    return {
      taskType: "逾期催收",
      form: {
        companyName: "",
        entAmount: "",
        entNum: "",
        endNum: "",
        endAmount: "",
        receivedAmount: "",
        receivedNum: "",
        commissionRate: "",
        verbalTitle: "",
        verbalContent: "",
        ...this.row,
      },
      rowo: [],
      caseDetail: [],
      options: [],
      dialogVisible_add: false,
      dialogVisible_overdueRial: false,
      dialogVisible_adjustCase: false,
      dialogVisible_record: false,
      dialogVisible_msg: false,
      addBack: false,
      phoneFlag: false,//反馈结果中是否包含拨打电话信息
      resultOptions: [],
      backInfo: {
        talkBegin: "",
        talkEnd: "",
        talkTime: "",
        callResult: "",
        callRemarks: "",
      },
      backRule: {
        callResult: [
          {required:true,message: '请选择回访结果',trigger: 'change'},
        ],
      },
      msgFlag: false,
    };
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", val);
      },
    },
  },
  methods: {

    getOptions() {
      this.$axios({
        method: "get",
        url: `/CMC/feedBack/selectList`,
        data: "",
      })
        .then((res) => {
          if (res.code == 200) {
            this.resultOptions = res.data;
          } else {
            Message.warning(res.message);
          }
        })
        .catch((err) => {});
    },

    saveBackInfo(){
      if(!this.backInfo.callResult){
        this.$message.warning("请选择回访结果！");
        return false;
      }

      let data = {
        ...this.row,
        ...this.backInfo,
        id: "",
      }
      this.$axios({
        method: "post",
        url: `/CMC/api/tbCall/updateResult`,
        params: data,
      })
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("操作成功！")
            this.$refs.optionsTab.getList();
          } else {
          }

          this.addBack = false;
          this.phoneFlag = false;
        })
        .catch((err) => {});
    },
    saveCallInfo(){
      //debugger;
      let info = {
        ...this.row,
        ...this.backInfo,
        id: "",
      }
      this.$axios({
        method: "post",
        url: `/CMC/api/tbCall/history/insertRecord`,
        params: info,
        headers: {'Content-Type':'application/x-www-form-urlencoded'},
      }).then((res) => {
        this.$refs.optionsTab.getList();
      });
    },

    cancelBack(){
      this.backInfo = {
        talkBegin: "",
        talkEnd: "",
        talkTime: "",
        callResult: "",
        callRemarks: "",
      }
      this.addBack = false;
      this.phoneFlag = false;
    },
    /**挂断电话后触发**/
    openBack(timesMap){
      this.backInfo = {
        ...timesMap,
      }
      this.saveCallInfo();

    },
    refreshOverdueJinE(){
      this.$message.success("更新成功");
    },
    fatherTable(){
      this.$parent.getList()
    },

    getmsgtitle() {
      var type="0"
      let data = {
        type: type,
      }
      this.$axios
        .get("/IAM/MC/verbal/showByCondition",{params:data,})
        .then((res) => {
          // console.log(res)
          for(let i = 0 ; i < res.data.content.length; i++) {
            this.options.push({
              value: i ,
              label: res.data.content[i].verbalTitle
            })
          }
        });
    },
    getmsgcontent(val) {
      // console.log(val)
      this.form.verbalContent = ""
      let data = {
        verbalTitle: val.label
      }
      this.$axios
      .get("/IAM/MC/verbal/showByCondition", {
          params: data,
        }).then((res) => {
        // console.log(res)
        for(let i = 0 ; i < res.data.content.length; i++) {
          this.form.verbalContent += res.data.content[i].verbalContent.replace(/<.+?>/g, '') + ""
        }
      });
    },
    StopPay(){
      this.$confirm("请确认是否发起止付流程?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
         console.log("卡片止付调用");
        let user = localStorage.getItem("User_Name");
        let data = {
          user: user,
        };
        this.$axios({
          method: "post",
          url: `/IAM/wf/startZhifu`,
          params: data,
        })
          .then((res) => {
            if (res.code == 200) {
              this.$message.success("操作成功！");
            } else {
            }

            this.addBack = false;
            this.phoneFlag = false;
          })
          .catch((err) => {});
        this.$message({
          type: "success",
          message: "操作成功!",
        });
      });
    },
    showAdd() {
      // this.rowo = row;
      this.dialogVisible_add = true;
    },
    showOverdueRial() {
      // this.rowo = row;
      this.dialogVisible_overdueRial = true;
    },
    showAdjustCase() {
      // this.rowo = row;
      this.dialogVisible_adjustCase = true;
    },
    showRecord() {
      //this.rowo = row;
      this.dialogVisible_record = true;
    },
    showMsg() {
      // console.log(row)
      this.rowo = this.row;
      this.dialogVisible_msg = true;
    },
    showCallBack() {
      this.addBack = true;
      this.phoneFlag = false;
      this.backInfo = {
        phoneNumber: "",
        talkBegin: "",
        talkEnd: "",
        talkTime: "",
        callResult: "",
        callRemarks: "",
      }

    },
    recovery() {
      let data = {
        putoutNo: this.row.putoutNo,
        customerId: this.row.customerId,
      };
      this.$axios
        .get("/CC/Operation/queryLostRepair", {
          params: data,
        })
        .then((res) => {

          if (res.code == "200" && (res.msg).indexOf('ERROR:') == -1) {
            this.$message.success("修复成功");

          } else {
            this.$message.error("修复失败:"+res.msg);
          }
        });
    },
    realTimeDebt() {
      let data = {
        customerId: this.row.customerId,
        putoutNo: this.row.putoutNo,
      };
      this.$axios
        .get("/CC/Operation/queryArrears", {
          params: data,

        })
        .then((res) => {
          // if (res.code == "200" && (res.msg).indexOf('ERROR') == -1) {
           if (res.code == "200") {
            // console.log(res.data)
            this.$message.success("操作成功");
          }
          else {
            this.$message.error("操作失败:"+res.msg);
          }
        });
    },
  },
  created() {
    this.$set(this.row,"phoneNumberStr",this.replaceStar(this.row.phoneNumber));
    console.log("this.row=",this.row);
    this.getOptions();
    this.getmsgtitle();
  }
};
</script>

<style lang="scss" scoped>
.case-detail {
  padding: 10px 20px;
  background-color: #ffffff;
  border-radius: 10px;
}
::v-deep .el-tabs__active-bar {
  display: none;
}
::v-deep .el-tabs__item {
  height: auto;
}
::v-deep .el-tabs__item.is-active {
  color: #ffffff;
  background-color: #d10a14;
  padding: 0px;
  line-height: 30px;
  border-radius: 15px;
}
</style>
